define(["jQuery", "kendo"], function ($, kendo) {
    return {
    	creationMode:false,
		selectedList:false,
		color:false,
		listItemCount:0,
		show : function(){
			$( "#pick-color-dragable-menu" ).show();			
		},
		
        init: function (e) {
			console.log("init pick-color ...");
			$("#pick-color-dragable-menu").draggable();
			$("#pick-color-dragable-menu").hide();
			
			$(".pick-color-tools").click(function() {
				App.color = $(this).attr('data-color');
				// App.setEnableChartCreationMode(true);
			});
			
			$("#btn-color").click(function() {
				var hex = App.pickColorToolbox.color;
				if(hex.charAt(0) == "#") hex = hex.slice(1); //Remove the '#' char - if there is one.
				hex = hex.toUpperCase();
				var hex_alphabets = "0123456789ABCDEF";
				var value = new Array(3);
				var k = 0;
				var int1,int2;
				for(var i=0;i<6;i+=2) {
					int1 = hex_alphabets.indexOf(hex.charAt(i));
					int2 = hex_alphabets.indexOf(hex.charAt(i+1)); 
					value[k] = (int1 * 16) + int2;
					k++;
				}
				document.getElementById("r").value = value[0];
				document.getElementById("g").value = value[1];
				document.getElementById("b").value = value[2];
				console.log(value[0]);
			});
			
			$(".ok-pick-color-button").click(function() {
				// if(App.upload.uploadResultUrl)
				// {
					$( "#pick-color-dragable-menu" ).hide();
					App.pickColorSelected();
					// App.addChart(App.lastClickPoint.x,App.lastClickPoint.y); //(App.upload.uploadResultUrl,App.lastClickPoint.x,App.lastClickPoint.y);
				// }
				// else
				// {
					// alert('Please select an image');
				// }
					
			});
			
			$(".cancel-pick-color-button").click(function() {
				$( "#pick-color-dragable-menu" ).hide();
				// App.setEnableChartCreationMode(false,"");
			});		
		
		},
		
		getColor:function (col){
			App.pickColorToolbox.color = col;
			// console.log(col);
		}
	}
});